import React, { useCallback } from 'react'
import List from '@/components/list/List'
import { useSelector } from 'react-redux'

import {
  RecommendedWrapper,
  RecommendedItem
} from './styledHome'

export default function Recommended(props) {
  const list = useSelector(state => {
    return state.getIn(['home', 'list'])
  })

  const renderItem = useCallback(
    item => {
      return (
        <RecommendedItem>
          <div className="img">
            <img src={item.img} alt="" />
          </div>
          <div className="description">
            <div className="title">{item.name}</div>
            <div className="release">{item.release}</div>
            <div className="theater">{item.theater}</div>
            <div className="price">￥{item.price}</div>
          </div>
        </RecommendedItem>
      )
    },
    [],
  )

  return (
    <RecommendedWrapper>
      <List
        title="为你推荐"
        data={list}
        renderItem={renderItem}
        direction='column'
      ></List>
    </RecommendedWrapper>
  )
}
